<template>
  <el-drawer v-model="visible" :show-close="false">
    <template #header>
      <h4 class="titleClass">推荐配置比例</h4>
    </template>
    <p>以上大类资产配置比例供参考使用,具体营销过程中请结合客户的风险偏好、行内外资产情况等"一客一议".</p>
    <div style="margin-top:10px">
      <p>当前客户标签: <el-tag>品质中产</el-tag> </p>
      <div class="pie" id="echartAssetsPie"></div>
      <div>
        <el-row style="margin-top:10px" v-for="item in assetsDetail" :key="item.color">
          <el-col style="margin-top:10px" :span="24">
            <p class="assetsDetailTileP">
              <el-tag class="mx-1" effect="dark" :color="item.color"></el-tag>
              <span>{{ item.title }}</span>
            </p>
          </el-col>
          <el-col class="tagCol" :span="24" v-for="assetItem,index in item.assetsArray" :key="index">
            <span>{{ assetItem.name }}</span>
            <el-tag class="tag" effect="Light" type='info' v-for="tag,index in assetItem.assetsDetailTags"  :key="index">{{ tag }}</el-tag>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
  import * as echarts from "echarts";
  const chartOptions = reactive({
    commandPieChartOption: {
      legend: {
        show: false,
        bottom: 0,
        icon: "circle",
      },
      color: ["#ffbb3e", "#2c89ec", "#39bdc6", "#2ca761", "#f1627a"],
      series: [
        {
          type: "pie",
          name: "",
          radius: ["40%", "80%"],
          label: {
            show: true,
            color: "#333",
            position:'inner',
            fontSize: 13,
            color:"rgba(255, 255, 255, 1)",
            formatter:'{d}%'
          },
          data: [
            { value: 20000, name: "存款" },
            { value: 20000, name: "理财" },
            { value: 20000, name: "基金" },
            { value: 20000, name: "当年保险" },
            { value: 20000, name: "代销理财" },
            // { value: 20000, name: "当月贵金属" },
          ],
        },
      ],
    },
  });
  const visible = ref(false)
  const assetsDetail = ref(
    [
      {title:'现金管理',color:"#ffbb3e",assetsArray:[{name:'存款',assetsDetailTags:['活期存款','通知存款']}]},
      {title:'现金管理2',color:"#2c89ec",assetsArray:[{name:'存款',assetsDetailTags:['活期存款','通知存款']}]},
      {title:'现金管理3',color:"#39bdc6",assetsArray:[{name:'存款',assetsDetailTags:['活期存款','通知存款']}]},
      {title:'现金管理4',color:"#2ca761",assetsArray:[{name:'存款',assetsDetailTags:['活期存款','通知存款']},{name:'存款',assetsDetailTags:['活期存款','通知存款','通知存款','通知存款','通知存款','通知存款']}]},
      {title:'现金管理5',color:"#f1627a",assetsArray:[{name:'存款',assetsDetailTags:['活期存款','通知存款']}]},
    ]
  )
  const show = ()=>{
    visible.value = true
    nextTick(res=>{
      const echartAssetsPie = document.getElementById("echartAssetsPie");
      const commandPieChart = echarts.init(echartAssetsPie);
      commandPieChart.setOption(chartOptions.commandPieChartOption);
    })
  }
  const hide = ()=>{
    visible.value = false
  }
  defineExpose({
    show,
    hide
  })
</script>

<style lang="scss" scoped>
  .titleClass{
    font-weight: 600;
    font-size: 16px;
    color: #495169;
  }
  .pie {
    height: 300px;
    width: 20vw;
  }
  .assetsDetailTileP{
    display: flex;
    flex-direction: row;
    align-items: center;
    span{
      font-size: 14px;
      color: #7B7F8C;
    }
  }
  .tagCol{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
    span{
      margin-right: 5px;
      min-width: 20px;
      font-size: 12px;
      color: #7B7F8C;
    }
    .tag{
      margin: 0 5px;
      margin-top: 5px;
      color: #495169;
      min-width: 80px;
    }
  }
  .mx-1{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
</style>